<template>
    <div>
        <van-nav-bar title="" left-text="返回" left-arrow @click-left="onClickLeft" style="margin-top: .2rem;" />
        起点：
        <van-cell-group style="margin-top: .2rem;">
            <van-field id="start" v-model="startName" />
        </van-cell-group>
        目的地：
        <van-cell-group style="margin-top: .2rem;">
            <van-field id="end" v-model="this.$route.query.address"/>
        </van-cell-group>

        <div id="container" />
        <div id="container1" />
        <van-button type="info" style="margin-top: .2rem;" @click="goView">开始规划路线</van-button>
        <van-popup v-model="show" class="tanchuang">
            <h1 class="biaoti">是否允许获取当前定位</h1>
            <div>
                <div class="buttonjz">
                    <van-button round type="info" @click="position">获取当前定位</van-button>
                    <van-button disabled round style=" margin-left: .3rem;" type="danger"> 不允许 </van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>
   
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// import Chat from './Chat.vue';
export default {
    data: () => {
        return {
            map: null,
            startName: "",
            show:'true',
        };
    },
    created() {
        //alert(JSON.stringify(this.$route.query.address));
    //生命周期  创建后要做的事情  vue被创建时候执行的
  },
    mounted() {
        window._AMapSecurityConfig = {
            securityJsCode: "13214e449a0bb04ac7f7999e0d0a6f35", // 申请key对应的秘钥
        };
        // DOM初始化完成进行地图初始化
        this.initMap();
        //   this.position()
    },
    components: {
       
    },
    methods: {
        
        onClickLeft() {
            this.$router.go(-1);
        },
        goView() {
            document.getElementById("container").style.zIndex = 9;
            document.getElementById("container").style.display = "block";
            document.getElementById("container1").style.display = "none";
            // eslint-disable-next-line no-undef
            const walking = new AMap.Walking({
                map: this.map,
                // 步行路线规划策略
                policy: "panel",
            });
           
            const points = [
                { keyword: this.startName, city: "全国" },
                { keyword: this.$route.query.address, city: "全国" },
            ];
            walking.search(points, (status, result) => {
                // 未出错时，result即是对应的路线规划方案
                console.log("status=", status);
                console.log("result=", result);
            });
        },
        position() {
            var that = this;
            that.show = !that.show;

            document.getElementById("container").style.display = "none";
            document.getElementById("container1").style.display = "block";
            //初始化地图对象，加载地图
            var map = new AMap.Map("container1", {
                resizeEnable: true,
            });
            var options = {
                // 设置定位超时时间，默认：无穷大
                timeout: 4000,
                // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                zoomToAccuracy: true,
                showButton: true, //是否显示定位按钮
                position: "LB", //定位按钮的位置
                /* LT LB RT RB */
                offset: [10, 20], //定位按钮距离对应角落的距离
                showMarker: true, //是否显示定位点
                markerOptions: {
                    //自定义定位点样式，同Marker的Options
                    offset: new AMap.Pixel(-18, -36),
                    content:
                        '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
                },
                showCircle: true, //是否显示定位精度圈
                circleOptions: {
                    //定位精度圈的样式
                    strokeColor: "#0093FF",
                    noSelect: true,
                    strokeOpacity: 0.5,
                    strokeWeight: 1,
                    fillColor: "#02B0FF",
                    fillOpacity: 0.25,
                },
            };
            AMap.plugin(["AMap.Geolocation"], function () {
                var geolocation = new AMap.Geolocation(options);
                map.addControl(geolocation);
                geolocation.getCurrentPosition(function (status, result) {
                    if (status == "complete") {
                        onComplete(result);
                    } else {
                        onError(result);
                    }
                });
            });

            function onComplete(data) {
                var str = [];
                str.push("定位结果：" + data.position);
                str.push("定位类别：" + data.location_type);
                //alert(str);
                if (data.accuracy) {
                    str.push("精度：" + data.accuracy + " 米");
                } //如为IP精确定位结果则没有精度信息
                str.push("是否经过偏移：" + (data.isConverted ? "是" : "否"));
                // console.log(str)

                AMap.plugin("AMap.Geocoder", function () {
                    var geocoder = new AMap.Geocoder({
                        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                        city: "010",
                    });

                    var lnglat = [data.position];

                    geocoder.getAddress(lnglat, function (status, result) {
                        if (status === "complete" && result.info === "OK") {
                            // result为对应的地理位置详细信息
                            console.log(result.regeocodes[0].formattedAddress);
                            that.startName = result.regeocodes[0].formattedAddress;
                            // console.log(that.startName)
                        }
                    });
                });
            }
            //解析定位错误信息
            function onError(data) {
                console.log("定位失败");
                console.log(
                    "失败原因排查信息:" +
                    data.message +
                    "</br>浏览器返回信息：" +
                    data.originMessage
                );
            }
        },
        initMap() {
            AMapLoader.load({
                key: "cd20c5721a20a3f87886d85f26974150", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ["AMap.ToolBar", "AMap.Walking", "AMap.AutoComplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
                .then((AMap) => {
                    this.map = new AMap.Map("container", {
                        // 设置地图容器id
                        viewMode: "3D", // 是否为3D地图模式
                        zoom: 10, // 初始化地图级别
                        // center: [105.602725, 37.076636] // 初始化地图中心点位置
                    });
                    const autoOptions = {
                        // city 限定城市，默认全国
                        city: "全国",
                        input: "start",
                    };
                    // 实例化AutoComplete
                    const autoComplete = new AMap.AutoComplete(autoOptions);
                    const autoOptions2 = {
                        // city 限定城市，默认全国
                        city: "全国",
                        input: this.$route.query.address,
                    };
                    // 实例化AutoComplete
                    const autoComplete2 = new AMap.AutoComplete(autoOptions2);
                    // 根据关键字进行搜索
                    /* autoComplete.search(this.startName, (status, result) => {
                      // 搜索成功时，result即是对应的匹配数据
                      console.log(result)
                    }) */
                })
                .catch((e) => {
                    console.log(e);
                });
        },
    },
};
</script>
<style scoped>
#container {
    /* display: block; */
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 500px;
}

#container1 {
    display: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 500px;
}

#panel {
    position: fixed;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    top: 10px;
    right: 10px;
    width: 280px;
}

#panel .amap-call {
    background-color: #009cf9;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#panel .amap-lib-walking {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
}

.biaoti {
    font-weight: 400;
    font-size: 25px;
    margin-top: 0.3rem;
    margin-left: 0.1rem;
    margin-bottom: 0.5rem;
}

.tanchuang {
    width: 300px;
    height: 100px;
    border-radius: 15px;
    /* background-color: aqua; */
}

.buttonjz {
    margin-left: .3rem;
}

.chat {
    margin-top: .2rem;
}
</style>